<template>
	<nut-form>
		<nut-form-item label="姓名">
			<nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入姓名" type="text" />
		</nut-form-item>
		<nut-form-item label="年龄">
			<nut-input v-model="basicData.age" class="nut-input-text" placeholder="请输入年龄" type="text" />
		</nut-form-item>
		<nut-form-item label="联系电话">
			<nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" />
		</nut-form-item>
		<nut-form-item v-model="basicData.address" label="地址">
			<nut-input class="nut-input-text" placeholder="请输入地址" type="text" />
		</nut-form-item>
		<nut-form-item label="备注">
			<nut-textarea placeholder="请输入备注" type="text" />
		</nut-form-item>
	</nut-form>
	<nut-tabbar bottom safe-area-inset-bottom placeholder>
		<nut-tabbar-item v-for="(item,index) in List" :tab-title="item.title" :icon="item.icon"> </nut-tabbar-item>
	</nut-tabbar>
</template>
<script lang="ts">
	import {
		h,
		ref,
		reactive
	} from 'vue';
	import {
		Home,
		Category,
		Find,
		Cart,
		My
	} from '@nutui/icons-vue';
	export default {
		components: {
			Home,
			Category,
			Find,
			Cart,
			My
		},
		setup() {
			const basicData = reactive({
				name: '',
				age: '',
				tel: '',
				address: ''
			})
			const List = [{
					title: '标签',
					icon: h(Home),
				},
				{
					title: '标签',
					icon: h(Category),
				},
				{
					title: '标签',
					icon: h(Find),

				},
				{
					title: '标签',
					icon: h(Cart),
				},
				{
					title: '标签',
					icon: h(My),
				}
			]
			return {
				List,
				basicData
			};
		},
	}
</script>
